<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ordinal Scale</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<div id="alphabet" class="clear">
    <span>Ordinal Scale with Alphabet<br></span>
    <span>Mapping [1..10] to ["a".."j"]<br></span>
</div>
<div id="category10" class="clear">
    <span>Ordinal Color Scale Category 10<br></span>
    <span>Mapping [1..10] to category 10 colors<br></span>
</div>
<div id="category20" class="clear">
    <span>Ordinal Color Scale Category 20<br></span>
    <span>Mapping [1..10] to category 20 colors<br></span>
</div>
<div id="category20b" class="clear">
    <span>Ordinal Color Scale Category 20b<br></span>
    <span>Mapping [1..10] to category 20b colors<br></span>
</div>
<div id="category20c" class="clear">
    <span>Ordinal Color Scale Category 20c<br></span>
    <span>Mapping [1..10] to category 20c colors<br></span>
</div>

<script type="text/javascript">
    var max = 10, data = [];

    for (var i = 0; i < max; ++i) data.push(i); // <-A
    
    var alphabet = d3.scale.ordinal() // <-B
        .domain(data)
        .range(["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]);
        
    function render(data, scale, selector) { // <-C
        d3.select(selector).selectAll("div.cell")
                    .data(data)
                .enter().append("div").classed("cell", true);

        d3.select(selector).selectAll("div.cell")
                    .data(data)
                .exit().remove();

        d3.select(selector).selectAll("div.cell")
                    .data(data)
                .style("display", "inline-block")
                .style("background-color", function(d){  // <-D
                    return scale(d).indexOf("#")>=0?scale(d):"white";
                })
                .text(function (d) { // <-E
                    return scale(d);
                });
    }

    render(data, alphabet, "#alphabet"); // <-F
    render(data, d3.scale.category10(), "#category10");
    render(data, d3.scale.category20(), "#category20");
    render(data, d3.scale.category20b(), "#category20b");
    render(data, d3.scale.category20c(), "#category20c"); // <-G
</script>

</body>

</html>